<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta charset="UTF-8">
    <title>商城精选</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="themes/css/core.css">
    <link rel="stylesheet" href="themes/css/icon.css">
    <link rel="stylesheet" href="themes/css/home.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.js"></script>
    <script src="/js/common.js"></script>
    <style>
        .n-tabs {
            position: fixed;
            top: 44px;
            left: 0;
            width: 100%;
            height: 41px;
            overflow: hidden;
            z-index: 1000;
            background-color: #fff;
            box-shadow: 0 0 10PX 0PX rgba(155, 143, 143, 0.6);
            -webkit-box-shadow: 0 0 10PX 0PX rgba(155, 143, 143, 0.6);
            -moz-box-shadow: 0 0 10PX 0PX rgba(155, 143, 143, 0.6);
        }

        .n-tabs .edge {
            position: fixed;
            top: 0;
            height: 41px;
            width: 100%;
            border-bottom: 1px solid #e5e5e5;
        }

        .n-tabs .n-tabContainer {
            -webkit-overflow-scrolling: touch;
            position: relative;
            top: 0;
            left: 0;
            overflow-x: auto;
            overflow-y: hidden;
            padding-left: 16px;
            height: 51px;
            font-size: 14px;
            color: #333;
            white-space: nowrap;
        }

        .n-tabs .n-tabContainer .navtab {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }

        .n-tabs .n-tabContainer .n-tabItem {
            -webkit-box-flex: 1;
            -webkit-flex-grow: 1;
            flex-grow: 1;
            -webkit-flex-shrink: 0;
            flex-shrink: 0;
            display: inline-block;
            height: 41px;
            line-height: 41px;
            text-align: center;
            margin-left: 20px;
        }

        .n-tabs .n-tabContainer .n-tabItem:first-child {
            margin-left: 0;
        }

        .n-tabs .n-tabContainer .n-tabItem .current {
            display: inline-block;
            height: 41px;
            border-bottom: 2px solid #e31436;
            color: #e31436;
        }

    </style>

    <script>
        //获取当前user对象
        var user = JSON.parse(sessionStorage.getItem("user"));
        $(function () {

            $(window).scroll(function () {
                // console.log($(document).scrollTop() + $(window).height() + "---" + $(document).height());
                if ($(document).scrollTop() + $(window).height() + 5 >= $(document).height()) {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '人家是有底线的',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });

                }
            });
            $("#userScore").html(user.score + '积分')
            $.get("/malls", function (data) {
                //渲染数据
                $("#product").renderValues(data);
                //积分兑换
                $(".score").click(function () {
                    var score = $(this).data("score");
                    $.ajax({
                        type: "put",
                        url: "/malls",
                        data: "score=" + score + "&userId=" + user.id,
                        success: function (msg) {
                            sessionStorage.setItem("user", JSON.stringify(msg.result));
                            user = JSON.parse(sessionStorage.getItem("user"));
                            if (user.score >= score) {
                                window.location.href='/mine/pay.html'
                            } else {
                                $(document).dialog({
                                    content: '您的积分不够'
                                });
                            }
                            $("#userScore").html(user.score + "积分");
                        }
                    });

                });
            })
            $(".headImage").attr("src", user.headImgUrl);

        });
    </script>

</head>
<body>

<div class="nav-search">
    <a href="/mine/profiles.html">
        <span>
            <i class="fa fa-angle-left fa-2x">
                <span  style="float:  initial;font-size: 20px;">积分商城</span>
                <div class="aui-recommend">
                <img src="themes/img/bg/icon-tj2.jpg" alt="">
                 <!--<h2>为你推荐</h2>-->
                </div>
            </i>
        </span>
    </a>

    <div class="row info">
        <div class="col-7" style="margin-right: 25px;position: absolute;top: 6%;">
            <a href="/mine/profiles.html">
            <img src="" class="rounded-circle headImage" style="float:  left;width: 38px;">
            </a>
            <span id="userScore" style="font-size: 14px;margin-top: 14px;display: block;"></span>
        </div>
    </div>
</div>
<hr/>

<section class="aui-list-product" id="product">
    <div class="aui-list-product-box" render-loop="list">
        <a href="javascript:;" class="aui-list-product-item">
            <div class="aui-list-product-item-img">
                <img class="image" render-src="list.imageUrl" alt="">
            </div>
            <div class="aui-list-product-item-text">
                <h3 render-html="list.productName"></h3>
                <h3 render-html="list.productDescript"></h3>
                <div class="aui-list-product-mes-box">
                    <div>
                        <span class="aui-list-product-item-price">
                            <span render-html="list.salePrice"></span>
                            <em>积分</em>
                        </span>
                    </div>
                    <div class="aui-comment">
                        <button class="glyphicon glyphicon-jpy score" style="background-color: #03A9F4;
                            border: 1px solid #03A9F4;
                            border-radius: 10px;
                            padding: 3px;" render-attr="data-score=list.salePrice">积分兑换
                        </button>
                    </div>
                </div>
            </div>
        </a>
    </div>
</section>
</div>

<footer class="aui-footer-default aui-footer-fixed">
    <a href="index.html" class="aui-footer-item">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-home"></span>
        <span class="aui-footer-item-text">首页</span>
    </a>
    <a href="class.html" class="aui-footer-item">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-class"></span>
        <span class="aui-footer-item-text">分类</span>
    </a>
    <a href="find.html" class="aui-footer-item aui-footer-active">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-find"></span>
        <span class="aui-footer-item-text">发现</span>
    </a>
    <a href="car.html" class="aui-footer-item">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-car"></span>
        <span class="aui-footer-item-text">购物车</span>
    </a>
    <a href="/mine/profiles.html" class="aui-footer-item">
        <span class="aui-footer-item-icon aui-icon aui-footer-icon-me"></span>
        <span class="aui-footer-item-text">我的</span>
    </a>
</footer>
<script type="text/javascript" src="themes/js/aui.js"></script>
</body>
</html>